import React, {PureComponent} from 'react';
import {Tabs} from 'antd-mobile';
import {StickyContainer, Sticky} from 'react-sticky';
import {CacheLink, Control} from 'react-keeper';
import HeadNavBar from "Components/HeadNavBar";
import 'Less/index.less';
import GoodsImg from 'Image/goods-2.jpg';

function renderTabBar(props) {
  return (<Sticky>
    {({style}) => <div style={{...style, zIndex: 1}}><Tabs.DefaultTabBar {...props} /></div>}
  </Sticky>);
}

const tabs = [
  {
    id: 1,
    title: '优惠礼券',
  },
  {
    id: 2,
    title: '流量花费',
  },
  {
    id: 3,
    title: '影视会员',
  },
  {
    id: 4,
    title: '日常家居',
  },
  {
    id: 5,
    title: '其他商品',
  },
  {
    id: 6,
    title: '汽车用品',
  },
];

const goodsList = [
  {
    id: 1,
    name: '腾讯视频 VIP',
    thumb: '',
    credits: 500,
  },
  {
    id: 2,
    name: '腾讯视频 VIP',
    thumb: '',
    credits: 500,
  },
  {
    id: 3,
    name: '腾讯视频 VIP',
    thumb: '',
    credits: 500,
  },
  {
    id: 4,
    name: '腾讯视频 VIP',
    thumb: '',
    credits: 500,
  }
];

export default class Index extends PureComponent {

  bindLeftClick = () => {
    Control.go(-1);
  };

  bindTabClick = () => {
    Control.go('/goods/category/2');
  };

  render() {
    return (
      <div>
        {/*头部导航栏*/}
        <HeadNavBar
          title='flyxiaozhu shop'
          mode='light'
          icon='&#xe61a;'
          bindLeftClick={this.bindLeftClick}
        />
        <div style={{height: 53}}/>
        <StickyContainer>
          <Tabs tabs={tabs}
                initalPage={'t2'}
                renderTabBar={renderTabBar}
                onTabClick={this.bindTabClick}
          >
            <div className='goods-list'>
              <ul>
                {goodsList.map(item =>
                  <li key={item.id}>
                    <CacheLink to='/goods/detail/1'>
                      <div className='img-content'>
                        <img src={GoodsImg} alt="goods"/>
                      </div>
                      <div className='goods-name'>{item.name}</div>
                      <div className='credits'><span className='num'>{item.credits}</span>积分</div>
                    </CacheLink>
                  </li>
                )}
              </ul>
              <div className='prompt-information'>
                没有更多商品了
              </div>
            </div>
          </Tabs>
        </StickyContainer>
      </div>
    );
  }
}

